{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智面未来 - 面试报告</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            danger: '#FF5757',
            warning: '#FFAA33',
            neutral: '#F5F7FA',
            dark: '#1D2939'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
      }
      .fade-in {
        animation: fadeIn 0.6s ease-in-out;
      }
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .pulse-once {
        animation: pulse 1.5s ease-in-out;
      }
      @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4); }
        70% { box-shadow: 0 0 0 10px rgba(22, 93, 255, 0); }
        100% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0); }
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen">
  <!-- 导航栏 -->
  <nav id="main-nav" class="fixed w-full top-0 z-50 transition-all duration-300 py-4">
  <div class="container mx-auto px-4 md:px-6 lg:px-8">
    <div class="flex justify-between items-center">
      <a href="#" class="flex items-center space-x-2">
        <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
          <i class="fa fa-comments text-white text-xl"></i>
        </div>
        <span class="text-xl font-bold text-primary">智面未来</span>
      </a>

      <!-- 桌面导航 -->
      <div class="hidden md:flex items-center space-x-6">
        <!-- 系统说明（移至左侧） -->
        <div class="relative group mr-6">
          <a href="#" class="text-dark hover:text-primary transition-colors font-medium flex items-center">
            系统说明 <i class="fa fa-chevron-down ml-1 text-xs transition-transform group-hover:rotate-180"></i>
          </a>
          <div class="absolute left-0 mt-2 w-48 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
            <a href="#business" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">业务场景</a>
            <a href="#features" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">功能需求</a>
            <a href="#technology" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">技术架构</a>
          </div>
        </div>

        <!-- 模拟面试 -->
        <a href="/mnms/" class="text-dark hover:text-primary transition-colors font-medium">模拟面试</a>

        <!-- 个人主页（带下拉菜单） -->
        <div class="relative group">
          <a href="#" class="text-dark hover:text-primary transition-colors font-medium flex items-center">
            {{ name }}的个人主页 <i class="fa fa-chevron-down ml-1 text-xs transition-transform group-hover:rotate-180"></i>
          </a>
          <div class="absolute right-0 mt-2 w-60 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
            <a href="/info/" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">个人信息</a>
            <a href="/changeinfo/" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">修改个人信息</a>
            <a href="/msjl/" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">面试记录</a>

            <div class="border-t border-gray-100 my-1"></div>
            <a href="#about" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">关于我们</a>
            <a href="/login/" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors text-red-600">注销</a>
          </div>
        </div>

      </div>

      <!-- 移动端菜单按钮 -->
      <button id="menu-btn" class="md:hidden text-dark focus:outline-none">
        <i class="fa fa-bars text-2xl"></i>
      </button>
    </div>
  </div>

  <!-- 移动端导航菜单 -->
  <div id="mobile-menu" class="md:hidden hidden bg-white absolute w-full border-t border-gray-100">
    <div class="container mx-auto px-4 py-3 space-y-3">
      <a href="/mnms/" class="block text-dark hover:text-primary transition-colors py-2 font-medium">模拟面试</a>

      <!-- 系统说明下拉菜单（移动端） -->
      <div class="mobile-dropdown">
        <button class="w-full text-left flex justify-between items-center text-dark hover:text-primary transition-colors py-2 font-medium">
          系统说明 <i class="fa fa-chevron-down text-xs transition-transform"></i>
        </button>
        <div class="mobile-dropdown-content hidden pl-4 pt-2 pb-3 space-y-2">
          <a href="#business" class="block text-dark hover:text-primary transition-colors py-1">业务场景</a>
          <a href="#features" class="block text-dark hover:text-primary transition-colors py-1">功能需求</a>
          <a href="#technology" class="block text-dark hover:text-primary transition-colors py-1">技术架构</a>
        </div>
      </div>

      <!-- 个人主页下拉菜单（移动端） -->
      <div class="mobile-dropdown">
        <button class="w-full text-left flex justify-between items-center text-dark hover:text-primary transition-colors py-2 font-medium">
          个人主页 <i class="fa fa-chevron-down text-xs transition-transform"></i>
        </button>
        <div class="mobile-dropdown-content hidden pl-4 pt-2 pb-3 space-y-2">
          <a href="#profile" class="block text-dark hover:text-primary transition-colors py-1">个人信息</a>
          <a href="/changeinfo/" class="block text-dark hover:text-primary transition-colors py-1">修改个人信息</a>
          <a href="#interview-record" class="block text-dark hover:text-primary transition-colors py-1">面试记录</a>
          <a href="#exam-record" class="block text-dark hover:text-primary transition-colors py-1">笔试记录</a>
          <div class="border-t border-gray-100 my-1 w-2/3"></div>
          <a href="#about" class="block text-dark hover:text-primary transition-colors py-1">关于我们</a>
          <a href="#logout" class="block text-dark hover:text-primary transition-colors py-1 text-red-600">注销</a>
        </div>
      </div>

      <a href="#contact" class="block bg-primary text-white px-5 py-2 rounded-full text-center hover:bg-primary/90 transition-colors font-medium">了解更多</a>
    </div>
  </div>
</nav>

  <!-- 主内容区 -->
  <main class="container mx-auto px-4 py-8 md:py-12">
    <div class="max-w-6xl mx-auto">
      <!-- 报告标题区域 -->
      <div class="text-center mb-10 fade-in">
        <div class="inline-block bg-primary/10 rounded-full p-3 mb-4">
          <i class="fa fa-file-text-o text-2xl text-primary"></i>
        </div>
        <h1 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold mb-2">技术岗位面试报告</h1>

      <!-- 添加data-direction存储模板变量的值 -->
      <p class="text-gray-500" id="report-direction" data-direction="{{ fx }}">面试方向: {{ fx }}</p>
        <p class="text-gray-500 text-sm mt-1" id="report-date">2023年6月15日 14:30</p>
      </div>



      <!-- 简历成绩部分 -->
<div class="bg-white rounded-xl p-6 mb-8 card-shadow fade-in" style="animation-delay: 0.1s">
  <div class="flex items-center mb-6">
    <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center mr-3">
      <i class="fa fa-bar-chart text-primary"></i>
    </div>
    <h2 class="text-xl font-bold">简历成绩</h2>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div>
      <div class="flex justify-between items-center mb-2">
        <span class="font-medium">总体匹配度</span>
        <span class="text-primary font-bold">{{ jl_grade }}%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-3 mb-6">
        <div class="bg-primary h-3 rounded-full" style="width: 85%"></div>
      </div>
    </div>

    <div class="flex items-center justify-center">
      <div class="w-full max-w-xs">
        <canvas id="resume-score-chart"></canvas>
      </div>
    </div>
  </div>
</div>

<!-- 简历分析部分 -->
<!-- 简历分析部分 -->
<div class="bg-white rounded-xl p-6 mb-8 card-shadow fade-in" style="animation-delay: 0.15s">
  <div class="flex items-center mb-6">
    <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center mr-3">
      <i class="fa fa-line-chart text-primary"></i>
    </div>
    <h2 class="text-xl font-bold">简历分析</h2>
  </div>

  <!-- 待改进点 -->
  <div class="bg-yellow-50 border-l-4 border-warning rounded-r-lg p-5">
    <h3 class="font-semibold text-lg mb-4 flex items-center">
      <i class="fa fa-exclamation-circle text-warning mr-2"></i>
      待改进点
    </h3>

    <div class="space-y-4">
      <div class="flex items-start">
        <div class="w-8 h-8 bg-warning/10 rounded-full flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">
          <i class="fa fa-bar-chart text-warning text-sm"></i>
        </div>
        <div>
          <h4 class="font-medium text-gray-800 mb-1">简历不足之处分析</h4>
          <p class="text-gray-700">{{ jl }}</p>
        </div>
      </div>
    </div>
  </div>
</div>

      <!-- 总体评价卡片 -->
      <div class="bg-white rounded-xl p-6 mb-8 card-shadow fade-in" style="animation-delay: 0.2s">
        <div class="flex flex-col md:flex-row md:items-center">
          <div class="flex items-center mb-4 md:mb-0">
            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
              <i class="fa fa-star text-xl text-primary"></i>
            </div>
            <div>
              <h2 class="text-xl font-bold">总体评价</h2>
              <p class="text-gray-500">综合简历、笔试与面试表现</p>
            </div>
          </div>

          <div class="flex-1 flex justify-center md:justify-end">
            <div class="inline-flex items-center px-4 py-2 bg-primary/10 text-primary rounded-full">
              <span class="text-2xl font-bold mr-2" id="overall-score">{{ average_grade }}</span>
              <span>良好</span>
            </div>
          </div>
        </div>

        <div class="mt-6">
          <p class="text-gray-700 leading-relaxed" id="overall-comment">
            {{ result }}
          </p>
        </div>
      </div>

      <!-- 成绩图表区域 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
        <!-- 笔试成绩雷达图 -->
        <div class="bg-white rounded-xl p-6 card-shadow fade-in" style="animation-delay: 0.25s">
          <div class="flex items-center mb-6">
            <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center mr-3">
              <i class="fa fa-pencil text-primary"></i>
            </div>
            <h2 class="text-xl font-bold">笔试成绩分析</h2>
          </div>

          <div class="h-80">
            <canvas id="written-test-chart"></canvas>
          </div>

          <div class="mt-4 grid grid-cols-2 gap-2">
            <div class="flex items-center text-sm">
              <span class="w-3 h-3 bg-primary rounded-full mr-2"></span>
              <span>您的得分</span>
            </div>
            <div class="flex items-center text-sm">
              <span class="w-3 h-3 bg-gray-300 rounded-full mr-2"></span>
              <span>平均水平</span>
            </div>
          </div>
        </div>

        <!-- 面试成绩雷达图 -->
        <div class="bg-white rounded-xl p-6 card-shadow fade-in" style="animation-delay: 0.3s">
          <div class="flex items-center mb-6">
            <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center mr-3">
              <i class="fa fa-comments text-primary"></i>
            </div>
            <h2 class="text-xl font-bold">面试表现分析</h2>
          </div>

          <div class="h-80">
            <canvas id="interview-chart"></canvas>
          </div>

          <div class="mt-4 grid grid-cols-2 gap-2">
            <div class="flex items-center text-sm">
              <span class="w-3 h-3 bg-secondary rounded-full mr-2"></span>
              <span>您的表现</span>
            </div>
            <div class="flex items-center text-sm">
              <span class="w-3 h-3 bg-gray-300 rounded-full mr-2"></span>
              <span>理想水平</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 行为分析卡片 -->
      <div class="bg-white rounded-xl p-6 mb-8 card-shadow fade-in" style="animation-delay: 0.35s">
        <div class="flex items-center mb-6">
          <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center mr-3">
            <i class="fa fa-user text-primary"></i>
          </div>
          <h2 class="text-xl font-bold">行为表现分析</h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <!-- 姿势分析 -->
          <div class="border border-gray-100 rounded-lg p-4 hover:border-primary/30 hover:bg-primary/5 transition-all">
            <div class="flex items-center mb-3">
              <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center mr-3">
                <i class="fa fa-male text-primary"></i>
              </div>
              <h3 class="font-semibold">坐姿表现</h3>
            </div>

            <div class="mb-2">
              <div class="flex justify-between text-sm mb-1">
                <span>评分</span>
                <span class="font-medium" id="posture-score">{{ posture_score }}</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-primary h-2 rounded-full" id="posture-bar" style="width: 85%"></div>
              </div>
            </div>

            <p class="text-sm text-gray-600 mt-3" id="posture-comment">
              坐姿整体良好，但有3次身体前倾过度的情况，建议保持挺直自然的坐姿。
            </p>
          </div>

          <!-- 表情分析 -->
          <div class="border border-gray-100 rounded-lg p-4 hover:border-primary/30 hover:bg-primary/5 transition-all">
            <div class="flex items-center mb-3">
              <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center mr-3">
                <i class="fa fa-smile-o text-primary"></i>
              </div>
              <h3 class="font-semibold">表情表现</h3>
            </div>

            <div class="mb-2">
              <div class="flex justify-between text-sm mb-1">
                <span>评分</span>
                <span class="font-medium" id="expression-score">{{ expression_score }}</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-primary h-2 rounded-full" id="expression-bar" style="width: 78%"></div>
              </div>
            </div>

            <p class="text-sm text-gray-600 mt-3" id="expression-comment">
              表情略显严肃，在回答问题时可适当增加微笑，展现更积极的沟通态度。
            </p>
          </div>

          <!-- 眼神分析 -->
          <div class="border border-gray-100 rounded-lg p-4 hover:border-primary/30 hover:bg-primary/5 transition-all">
            <div class="flex items-center mb-3">
              <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center mr-3">
                <i class="fa fa-eye text-primary"></i>
              </div>
              <h3 class="font-semibold">眼神交流</h3>
            </div>

            <div class="mb-2">
              <div class="flex justify-between text-sm mb-1">
                <span>评分</span>
                <span class="font-medium" id="eyecontact-score">{{ eye_contact_score }}</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-primary h-2 rounded-full" id="eyecontact-bar" style="width: 75%"></div>
              </div>
            </div>

            <p class="text-sm text-gray-600 mt-3" id="eyecontact-comment">
              眼神交流不足，有多次看向别处的情况，建议在回答时保持与面试官的眼神接触。
            </p>
          </div>
        </div>
      </div>

      <!-- AI学习建议 -->
      <div class="bg-white rounded-xl p-6 mb-8 card-shadow fade-in" style="animation-delay: 0.4s">
        <div class="flex items-center mb-6">
          <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center mr-3">
            <i class="fa fa-lightbulb-o text-xl text-primary"></i>
          </div>
          <h2 class="text-xl font-bold">AI学习建议</h2>
        </div>

        <div class="space-y-6">
          <!-- 知识提升建议 -->
          <div>
            <h3 class="font-semibold text-lg mb-3 flex items-center">
              <span class="w-6 h-6 bg-primary/10 text-primary rounded-full flex items-center justify-center mr-2 text-sm">1</span>
              知识提升建议
            </h3>

            <ul class="space-y-3 ml-8 list-disc text-gray-700" id="knowledge-suggestions">
              <li>深入学习数据库索引原理，特别是B+树索引的结构和优化方法</li>
              <li>掌握事务隔离级别及锁机制，理解MVCC多版本并发控制</li>
              <li>学习数据库性能调优工具的使用，如explain分析查询计划</li>
              <li>研究分库分表策略，了解水平分片和垂直分片的适用场景</li>
            </ul>
          </div>

          <!-- 面试技巧建议 -->
          <div>
            <h3 class="font-semibold text-lg mb-3 flex items-center">
              <span class="w-6 h-6 bg-primary/10 text-primary rounded-full flex items-center justify-center mr-2 text-sm">2</span>
              面试技巧建议
            </h3>

            <ul class="space-y-3 ml-8 list-disc text-gray-700" id="interview-suggestions">
              <li>回答问题时采用STAR法则（情境-任务-行动-结果），使表述更有条理</li>
              <li>准备2-3个项目案例，能够详细讲解技术难点和解决方案</li>
              <li>练习在限定时间内简明扼要地回答问题，控制每个问题的回答时间在1-2分钟</li>
              <li>提前进行模拟面试练习，录制视频并回看自己的表现，针对性改进</li>
            </ul>
          </div>

          <!-- 推荐学习资源 -->
          <div>
            <h3 class="font-semibold text-lg mb-3 flex items-center">
              <span class="w-6 h-6 bg-primary/10 text-primary rounded-full flex items-center justify-center mr-2 text-sm">3</span>
              推荐学习资源
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 ml-8" id="learning-resources">
              <div class="border border-gray-100 rounded-lg p-3 hover:border-primary/30 hover:bg-primary/5 transition-all">
                <div class="font-medium">《高性能MySQL》</div>
                <p class="text-sm text-gray-500">深入讲解MySQL性能优化和架构设计</p>
              </div>

              <div class="border border-gray-100 rounded-lg p-3 hover:border-primary/30 hover:bg-primary/5 transition-all">
                <div class="font-medium">数据库索引设计与优化实战课程</div>
                <p class="text-sm text-gray-500">在线实战课程，包含大量案例分析</p>
              </div>

              <div class="border border-gray-100 rounded-lg p-3 hover:border-primary/30 hover:bg-primary/5 transition-all">
                <div class="font-medium">数据库事务与并发控制专题</div>
                <p class="text-sm text-gray-500">深入解析数据库事务原理与实践</p>
              </div>

              <div class="border border-gray-100 rounded-lg p-3 hover:border-primary/30 hover:bg-primary/5 transition-all">
                <div class="font-medium">技术面试实战指南</div>
                <p class="text-sm text-gray-500">包含常见问题解析和回答技巧</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex flex-col sm:flex-row justify-center gap-4 fade-in" style="animation-delay: 0.5s">


        <button id="retry-interview" class="px-6 py-3 border border-primary text-primary rounded-lg font-medium hover:bg-primary/5 transition-colors">
          <i class="fa fa-refresh mr-2"></i>再次面试
        </button>

        <button id="back-to-home" class="px-6 py-3 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors">
          <i class="fa fa-home mr-2"></i>返回首页
        </button>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-8 mt-12">
    <div class="container mx-auto px-4 md:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
              <i class="fa fa-comments text-primary text-xl"></i>
            </div>
            <span class="text-xl font-bold">智面未来</span>
          </div>
          <p class="text-gray-400 text-sm">
            智面未来是一款专注于技术岗位面试模拟的智能系统，帮助求职者提升面试技能，顺利拿到理想offer。
          </p>
        </div>




      </div>

      <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-500 text-sm">
        <p>© 2025 智面未来 版权所有</p>
      </div>
    </div>
  </footer>

  <script>
    // 初始化页面数据和图表
    document.addEventListener('DOMContentLoaded', function() {
      // 设置当前日期
      const now = new Date();
      const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
      document.getElementById('report-date').textContent = now.toLocaleString('zh-CN', options);

      // 根据面试方向生成不同的报告内容
        // 优先从HTML的data属性获取方向，而不是localStorage
      const directionElement = document.getElementById('report-direction');

      const direction = directionElement.dataset.direction || '数据库';
      //document.getElementById('report-direction').textContent = direction;
      generateDirectionSpecificContent(direction);

      // 初始化图表
      initCharts();

      // 绑定按钮事件
      bindEvents();
    });

    // 根据面试方向生成特定内容
    function generateDirectionSpecificContent(direction) {
      // 不同方向的评价和建议
      const contentMap = {
        '数据库': {
          knowledgeSuggestions: [
            '深入学习数据库索引原理，特别是B+树索引的结构和优化方法',
            '掌握事务隔离级别及锁机制，理解MVCC多版本并发控制',
            '学习数据库性能调优工具的使用，如explain分析查询计划',
            '研究分库分表策略，了解水平分片和垂直分片的适用场景'
          ],
          resources: [
            { title: '《高性能MySQL》', desc: '深入讲解MySQL性能优化和架构设计' },
            { title: '数据库索引设计与优化实战课程', desc: '在线实战课程，包含大量案例分析' },
            { title: '数据库事务与并发控制专题', desc: '深入解析数据库事务原理与实践' },
            { title: '技术面试实战指南', desc: '包含常见问题解析和回答技巧' }
          ]
        },
        '深度学习': {
          knowledgeSuggestions: [
            '深入理解卷积神经网络(CNN)的工作原理和应用场景',
            '掌握循环神经网络(RNN)和LSTM的原理及实现',
            '学习模型优化技巧，包括正则化、批归一化和学习率调度',
            '实践深度学习框架如TensorFlow或PyTorch的高级特性'
          ],
          resources: [
            { title: '《深度学习》- Ian Goodfellow', desc: '深度学习领域经典教材' },
            { title: 'CNN与计算机视觉实战课程', desc: '包含图像分类、目标检测项目实战' },
            { title: '深度学习模型调优技巧', desc: '讲解模型优化的实用方法和工具' },
            { title: '深度学习面试题解', desc: '包含常见算法题和理论问题' }
          ]
        },
        '前端': {
          overallComment: '您掌握了前端基础知识和主流框架的使用，结合简历来看，具备丰富的项目经验。但在性能优化和工程化方面还有提升空间。建议深入学习前端性能优化策略和现代前端工程化实践。您的简历与岗位匹配度较高，建议补充更多关于性能优化的项目经验。',
          knowledgeSuggestions: [
            '深入学习浏览器渲染原理和前端性能优化策略',
            '掌握React或Vue的源码实现原理和高级特性',
            '学习前端工程化最佳实践，包括构建工具和模块化方案',
            '研究前端安全问题和解决方案，如XSS和CSRF防护'
          ],
          resources: [
            { title: '《高性能JavaScript》', desc: '前端性能优化的经典指南' },
            { title: 'React源码解析与实战', desc: '深入理解React内部工作原理' },
            { title: '现代前端工程化实践', desc: '包含Webpack、Vite等构建工具的使用' },
            { title: '前端面试宝典', desc: '包含常见问题解析和编码题' }
          ]
        },
        '数通': {

          knowledgeSuggestions: [
            '深入理解OSPF和BGP等动态路由协议的工作原理',
            '掌握网络安全技术，包括防火墙配置和入侵检测',
            '学习大型网络设计原则和冗余备份策略',
            '实践网络故障排查工具的使用，如Wireshark和tcpdump'
          ],
          resources: [
            { title: '《计算机网络》- 谢希仁', desc: '计算机网络基础知识经典教材' },
            { title: '路由与交换技术实战', desc: '包含OSPF、BGP等协议的配置实践' },
            { title: '网络安全原理与实践', desc: '讲解网络安全防护技术' },
            { title: '网络工程师面试指南', desc: '包含常见问题和解决方案' }
          ]
        }
      };

      // 获取对应方向的内容
      const content = contentMap[direction] || contentMap[{{ fx }}];



      // 更新知识建议
      const knowledgeList = document.getElementById('knowledge-suggestions');
      knowledgeList.innerHTML = '';
      content.knowledgeSuggestions.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        knowledgeList.appendChild(li);
      });

      // 更新学习资源
      const resourcesContainer = document.getElementById('learning-resources');
      resourcesContainer.innerHTML = '';
      content.resources.forEach(item => {
        const div = document.createElement('div');
        div.className = 'border border-gray-100 rounded-lg p-3 hover:border-primary/30 hover:bg-primary/5 transition-all';
        div.innerHTML = `
          <div class="font-medium">${item.title}</div>
          <p class="text-sm text-gray-500">${item.desc}</p>
        `;
        resourcesContainer.appendChild(div);
      });
    }

    // 初始化图表
    function initCharts() {
      // 笔试成绩数据
      const writtenTestData = {
        labels: ['基础知识', '查询语句', '性能优化', '事务处理', '索引设计', '故障排查'],
        datasets: [
          {
            label: '您的得分',
            data: [85, 90, 75, 78, 82, 70],
            backgroundColor: 'rgba(22, 93, 255, 0.2)',
            borderColor: 'rgba(22, 93, 255, 1)',
            pointBackgroundColor: 'rgba(22, 93, 255, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(22, 93, 255, 1)'
          },
          {
            label: '平均水平',
            data: [70, 75, 60, 65, 68, 55],
            backgroundColor: 'rgba(200, 200, 200, 0.2)',
            borderColor: 'rgba(200, 200, 200, 1)',
            pointBackgroundColor: 'rgba(200, 200, 200, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(200, 200, 200, 1)',
            borderDash: [5, 5]
          }
        ]
      };

      // 面试成绩数据
      const interviewData = {
        labels: ['专业知识', '表达能力', '逻辑思维', '问题解决', '项目经验', '学习能力'],
        datasets: [
          {
            label: '您的表现',
            data: [85, 76, 80, 78, 83, 85],
            backgroundColor: 'rgba(54, 211, 153, 0.2)',
            borderColor: 'rgba(54, 211, 153, 1)',
            pointBackgroundColor: 'rgba(54, 211, 153, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(54, 211, 153, 1)'
          },
          {
            label: '理想水平',
            data: [90, 90, 90, 90, 90, 90],
            backgroundColor: 'rgba(200, 200, 200, 0.2)',
            borderColor: 'rgba(200, 200, 200, 1)',
            pointBackgroundColor: 'rgba(200, 200, 200, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(200, 200, 200, 1)',
            borderDash: [5, 5]
          }
        ]
      };

      // 雷达图配置
      const radarConfig = {
        scales: {
          r: {
            angleLines: {
              display: true
            },
            suggestedMin: 50,
            suggestedMax: 100
          }
        },
        plugins: {
          legend: {
            display: false
          }
        }
      };

      // 初始化笔试成绩图表
      const writtenTestCtx = document.getElementById('written-test-chart').getContext('2d');
      new Chart(writtenTestCtx, {
        type: 'radar',
        data: writtenTestData,
        options: radarConfig
      });

      // 初始化面试成绩图表
      const interviewCtx = document.getElementById('interview-chart').getContext('2d');
      new Chart(interviewCtx, {
        type: 'radar',
        data: interviewData,
        options: radarConfig
      });
    }

    // 绑定按钮事件
    function bindEvents() {




      // 再次面试按钮
      document.getElementById('retry-interview').addEventListener('click', function() {
        window.location.href = '/mnms/';
      });

      // 返回首页按钮
      document.getElementById('back-to-home').addEventListener('click', function() {
        window.location.href = '/main/';
      });

      // 移动端菜单切换
      document.getElementById('menu-btn').addEventListener('click', function() {
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenu.classList.toggle('hidden');
      });

      // 移动端下拉菜单
      document.querySelectorAll('.mobile-dropdown button').forEach(button => {
        button.addEventListener('click', function() {
          const content = this.nextElementSibling;
          const icon = this.querySelector('i');

          content.classList.toggle('hidden');
          icon.classList.toggle('rotate-180');
        });
      });
    }
  </script>
</body>
</html>